<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时关闭</title>
    <style type="text/css">
        #div1{
            width: 50px;
            height: 50px;
            background:yellow;
            display:block;
        }
        #div2{
            width: 100px;
            height: 100px;
            background:lightskyblue;
            display:none;
        }
    </style>
    <script type="text/javascript">
       window.onload=function(){
          var oDiv1=document.getElementById("div1");
          var oDiv2=document.getElementById("div2");
          oDiv1.onmouseover=function()
          {
              clearTimeout(time);
              oDiv2.style.display="block";

          }
           oDiv1.onmouseout=function()
           {
             time=  setTimeout(function(){
                   oDiv2.style.display="none";
               },500)
           }
           oDiv2.onmouseover=function()
           {
               clearTimeout(time);
           }
           oDiv2.onmouseout=function()
           {
              time=setTimeout(function() {
                  oDiv2.style.display = "none";
              },500)
           }

       }
    </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>


</body>
</html>